<html xmlns:th="http://www.thymeleaf.org">
<div class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'north',border:false"
         style="height: 32px; line-height: 32px;padding: 2px 5px;overflow: hidden;">
        <form id="imgItemSearchForm">
            <table>
                <tr>
                    <th>名称:</th>
                    <td><input name="name" placeholder="搜索条件"/></td>
                    <td>
                        <a href="javascript:void(0);" class="easyui-linkbutton"
                           data-options="iconCls:'glyphicon-search',plain:true" onclick="imgItemSearchFun();">查询</a>
                        <a href="javascript:void(0);" class="easyui-linkbutton"
                           data-options="iconCls:'glyphicon-remove-circle',plain:true"
                           onclick="imgItemCleanFun();">清空</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <div data-options="region:'center',border:false">
        <table id="imgItemDataGrid" data-options="fit:true,border:false"></table>
    </div>
</div>
<div id="imgItemToolbar" style="display: none;">
    <div th:if="${@sec.hasPermission('imgItem:add')}">
        <a onclick="imgItemAddFun();" href="javascript:void(0);" class="easyui-linkbutton"
           data-options="plain:true,iconCls:'glyphicon-plus icon-green'">添加</a>
    </div>
</div>

<script type="text/javascript">
    var imgItemDataGrid;
    $(function () {
        imgItemDataGrid = $('#imgItemDataGrid').datagrid({
            url: basePath + '/imgItem/dataGrid',
            striped: true,
            rownumbers: true,
            pagination: true,
            singleSelect: true,
            idField: 'id',
            sortName: 'id',
            sortOrder: 'asc',
            pageSize: 20,
            pageList: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500],
            frozenColumns: [[{
                width: 60,
                title: '编号',
                field: 'id',
                sortable: true
            }]],
            columns: [[{
                width: 120,
                title: '',
                field: 'id'
            }, {
                width: 120,
                title: '',
                field: 'filePath'
            }, {
                width: 120,
                title: '',
                field: 'url'
            }, {
                width: 120,
                title: '',
                field: 'thumbnail'
            }, {
                width: 120,
                title: '',
                field: 'createTime'
            }, {
                width: 120,
                title: '',
                field: 'updateTime'
            }, {
                width: 120,
                title: '',
                field: 'aliass'
            }, {
                width: 120,
                title: '',
                field: 'alias2'
            }, {
                width: 120,
                title: '',
                field: 'status'
            }, {
                width: 120,
                title: '',
                field: 'groupId'
            }, {
                width: 120,
                title: '',
                field: 'type2'
            }, {
                width: 120,
                title: '',
                field: 'description'
            }, {
                width: 80,
                title: '状态',
                field: 'status',
                sortable: true,
                formatter: function (value, row, index) {
                    return columnsDictFormat("dbStatus", value);
                }
            }, {
                width: 140,
                title: '创建时间',
                field: 'createTime',
                sortable: true
            }, {
                width: 200,
                field: 'action',
                title: '操作',
                formatter: function (value, row, index) {
                    var str = '';
                    /*[# th:if="${@sec.hasPermission('imgItem:edit')}"]*/
                    str += $.formatString('<a href="javascript:void(0)" class="imgItem-easyui-linkbutton-edit" data-options="plain:true,iconCls:\'glyphicon-pencil icon-blue\'" onclick="imgItemEditFun(\'{0}\');" >编辑</a>', row.id);
                    /*[/]*/
                    /*[# th:if="${@sec.hasPermission('imgItem:delete')}"]*/
                    str += '&nbsp;&nbsp;|&nbsp;&nbsp;';
                    str += $.formatString('<a href="javascript:void(0)" class="imgItem-easyui-linkbutton-del" data-options="plain:true,iconCls:\'glyphicon-remove icon-red\'" onclick="imgItemDeleteFun(\'{0}\');" >删除</a>', row.id);
                    /*[/]*/
                    return str;
                }
            }]],
            onLoadSuccess: function (data) {
                $('.imgItem-easyui-linkbutton-edit').linkbutton({text: '编辑'});
                $('.imgItem-easyui-linkbutton-del').linkbutton({text: '删除'});
            },
            toolbar: '#imgItemToolbar'
        });
    });

    /**
     * 添加框
     * @param url
     */
    function imgItemAddFun() {
        parent.$.modalDialog({
            title: '添加',
            width: 520,
            height: 300,
            href: basePath + '/imgItem/addPage',
            buttons: [{
                text: '确定',
                handler: function () {
                    parent.$.modalDialog.openner_dataGrid = imgItemDataGrid;//因为添加成功之后，需要刷新这个treeGrid，所以先预定义好
                    var f = parent.$.modalDialog.handler.find('#imgItemAddForm');
                    f.submit();
                }
            }]
        });
    }

    /**
     * 编辑
     */
    function imgItemEditFun(id) {
        if (id == undefined) {
            var rows = imgItemDataGrid.datagrid('getSelections');
            id = rows[0].id;
        } else {
            imgItemDataGrid.datagrid('unselectAll').datagrid('uncheckAll');
        }
        parent.$.modalDialog({
            title: '编辑',
            width: 520,
            height: 300,
            href: basePath + '/imgItem/editPage?id=' + id,
            buttons: [{
                text: '确定',
                handler: function () {
                    //因为添加成功之后，需要刷新这个dataGrid，所以先预定义好
                    parent.$.modalDialog.openner_dataGrid = imgItemDataGrid;
                    var f = parent.$.modalDialog.handler.find('#imgItemEditForm');
                    f.submit();
                }
            }]
        });
    }

    /**
     * 删除
     */
    function imgItemDeleteFun(id) {
        if (id == undefined) {//点击右键菜单才会触发这个
            var rows = imgItemDataGrid.datagrid('getSelections');
            id = rows[0].id;
        } else {//点击操作里面的删除图标会触发这个
            imgItemDataGrid.datagrid('unselectAll').datagrid('uncheckAll');
        }
        parent.$.messager.confirm('询问', '您是否要删除当前？', function (b) {
            if (b) {
                progressLoad();
                $.post(basePath + '/imgItem/delete', {
                    id: id
                }, function (result) {
                    if (result.code === 1) {
                        parent.$.messager.alert('提示', result.msg, 'info');
                        imgItemDataGrid.datagrid('reload');
                    }
                    progressClose();
                }, 'JSON');
            }
        });
    }

    /**
     * 清除
     */
    function imgItemCleanFun() {
        $('#imgItemSearchForm input').val('');
        imgItemDataGrid.datagrid('load', {});
    }

    /**
     * 搜索
     */
    function imgItemSearchFun() {
        imgItemDataGrid.datagrid('load', $.serializeObject($('#imgItemSearchForm')));
    }
</script>
